<template>
  <div>
    <div class="box1">
      <img src="/favicon.ico" />
      <p
        style="
          position: absolute;
          left: 44%;
          line-height: 34px;
          font-size: 22px;
          color: #642070;
        "
      >
        欢迎你{{ name }}
      </p>
    </div>
    <div class="box2">
      <van-grid>
        <van-grid-item @click="goOrder" icon="cart-circle-o" text="订单中心" />
        <van-grid-item @click="goShopChe" icon="cart-o" text="购物车" />
        <van-grid-item @click="goAccount" icon="balance-o" text="个人账户" />
        <van-grid-item @click="goKeFu" icon="comment-o" text="客服" />
      </van-grid>
    </div>
    <div class="box3">
      <p style="text-align: center; margin: 0">我的藏品</p>
      <div class="box3.1" v-if="open">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        />
      </div>
      <div class="box3.2" v-else>
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无藏品"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mine",
  data() {
    return {
      name: "这是哪头猪?",
      open: true,
    };
  },
  methods: {
    goOrder(){
      this.$router.push({name:"Order"});
    },
        goShopChe(){
      this.$router.push({name:"ShopChe"});
    },
        goAccount(){
      this.$router.push({name:"Account"});
    },
        goKeFu(){
      this.$router.push({name:"KeFu"});
    }
  }
};
</script>

<style scoped>
.box1 {
  height: 100px;
  /* background-color: pink; */
  padding: 10px 10px;
  padding-top: 20px;
}
.box1 img {
  height: 100px;
  border-radius: 50%;
  position: absolute;
  /* 定位要使用下面的 */
  left: 23%;
  /* 百分之50后 就到了中心偏下的位置 */
  /* 所以需要将盒子向左上移动 自己宽度高度的一半 */
  margin-left: -50px;
}
.box2,
.box3 {
  padding: 10px 10px;
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}
</style>